<template>
  <div class="home">
    <Myheader>
      <template #center></template>
    </Myheader>
    <WhiteSpace :space="50"></WhiteSpace>
    <MyCarousel :bannerList="homeBanner" :type="homeType"></MyCarousel>
    <WhiteSpace :space="20"></WhiteSpace>
    <el-row :gutter="10">
      <el-col :span="6" :offset="3">
        <div @click="$router.push('/shop')">
          <el-card shadow="hover">
          <div class="img-container">
            <img src="https://img1.baidu.com/it/u=1243463582,2112586237&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
          </div>
          <div style="padding: 14px;">
            <span>去kiana小商铺</span>
          </div>
        </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div @click="$router.push('/music')">
          <el-card shadow="hover">
          <div class="img-container">
            <img src="https://img2.baidu.com/it/u=1551683669,9877775&fm=253&fmt=auto&app=138&f=JPEG?" class="image">
          </div>
          <div style="padding: 14px;">
            <span>去听歌一曲</span>
          </div>
        </el-card>
        </div>      
      </el-col>
       <el-col :span="6">
        <div @click="$router.push('/roket')">
          <el-card shadow="hover">
          <div class="img-container">
            <img src="https://img0.baidu.com/it/u=3521931117,3199415428&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" class="image">
          </div>
          <div style="padding: 14px;">
            <span>好吃的汉堡</span>
          </div>
        </el-card>
        </div>        
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Music from '@/views/Music';
import Shop from '@/views/Shop';
import { mapActions, mapGetters, mapMutations } from 'vuex';

export default {
  components: {
    Music,
    Shop,
  },
  data() {
    return {
      homeType: 'card',
      homeBanner: [
        'https://img1.baidu.com/it/u=3833933856,2683762883&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1026',
        'https://img1.baidu.com/it/u=656652858,1046229740&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1048',
        'https://img2.baidu.com/it/u=239572217,4224508093&fm=253&fmt=auto&app=120&f=JPEG?w=751&h=500',
        'https://img0.baidu.com/it/u=2865093071,2306114604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1026',
        'https://img2.baidu.com/it/u=3991225787,2111941659&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=650',
        'https://img1.baidu.com/it/u=3532665056,621349509&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500',
      ]
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    ...mapMutations('user', ['setStoreUser', 'setStoreToken']),
    ...mapActions('user', ['getUserInfoData']),
  },
  mounted() {
    this.getUserInfoData();
  },
};
</script>

<style lang="scss" scoped>
.home {
  // background-color: pink;
  .el-row {
  // background-color: pink;
  .el-card {
    // height: 400px;
    &:hover {
      transform: scale(1.1);
      cursor: pointer;
    }
    .img-container {
      width: 100%;
      height: 200px;
      overflow: hidden;
      img {
        width: 300px;
        // height: 100%;
      }
    }
  }
}
}
</style>
